<template>
	<div>
    <div class="addressBlockDiv"
         @mouseenter="enterShowBorderColor()"
         @mouseleave="leaveRestoreBorderColor()"
         @click="clickAdsBlock(content.adressMsgId)"
         ref="addressBlockDivRef"
         style="width: 460px;height: 160px;display:flex;justify-content: center;align-items: center;border: #e7e7e7 solid 1px;margin-bottom: 30px;">
      <div v-if="!content.isNewAdd" style="width: 90%;height: 70%;">
        <div style="width: 100%;height: 40px;display: flex;align-items: center">
          <span>{{content.contName}}&nbsp;&nbsp;{{content.contPhone}}</span>
        </div>
        <div style="width: 100%;height: 40px;display: flex;align-items: center">
          <el-tag v-if="content.selectStatus == 1" type="warning" effect="plain" size="small">默认</el-tag>
          <span style="font-size: 13px;">
            <span v-for="item in content.areaAdress">{{item}}&nbsp;</span>
            <span>{{content.careAdress}}</span>
          </span>
        </div>
        <div style="width: 100%;height: 30px;display: flex;justify-content: flex-end">
          <div style="width: 20%;height: 30px;display: flex;justify-content: space-between;align-items: flex-end">
            <i class="el-icon-edit-outline" style="margin-left: 20px;cursor: pointer" @click="$emit('updateicon',content.adressMsgId)"></i>
            <i class="el-icon-delete" v-if="!ifCanCli" style="cursor: pointer" @click="$emit('deleteicon',content.adressMsgId)"></i>
          </div>
        </div>
      </div>
      <div v-if="content.isNewAdd">
        <div>
          <i class="el-icon-circle-plus-outline" @click="$emit('showupdate')" style="font-size: 14px;cursor:pointer;">添加新地址</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //保持前一个常亮元素
  let preVri;

  export default {
    name: "AddressBlock",
    props: {
      content: {
        type: Object
      },
      ifCanCli: {
        type: Boolean,
        default: false
      },
      adsBlockWdith: {
        type: Number,
        default: 460,
      },
      adsBlockHeight: {
        type: Number,
        default: 160,
      }
    },
    watch: {//监听地址数据的变化
      content(newVal,oldVal){
        this.ctn = newVal;
      },
      ifCanCli(newVal,oldVal){
        this.ifCanClick = newVal;
      }
    },
    data(){
      return {
        ctn: this.content,
        ifCanClick: this.ifCanCli,
        width: this.adsBlockWdith,
        height: this.adsBlockHeight
      }
    },
    computed: {
      getAddressBlockDivRef(){
        return this.$refs.addressBlockDivRef;
      }
    },
    methods: {
      clickAdsBlock(adressMsgId){//点击地址块
        if (this.ifCanClick){//确保是能够点击的
            this.$emit("clickadsblock",{adressMsgId: adressMsgId});//发送事件
            //使原来常亮的元素暗淡
            this.restoreBorderColor(preVri);
            //使当前元素常亮
            this.content.ifLL = true;
            //保存当前元素
            preVri = this.getAddressBlockDivRef;
        }
      },
      enterShowBorderColor() {//光标进入展示边框颜色
        if (this.ifCanClick) this.updateBorderColor(this.getAddressBlockDivRef)
      },
      leaveRestoreBorderColor() {//光标离开还原边框颜色
        if (this.ifCanClick && !this.content.ifLL) this.restoreBorderColor(this.getAddressBlockDivRef);
      },
      updateBorderColor(element) {//修改边框颜色和光标样式
        if (element) {
          element.style.borderColor = "green"
          element.style.cursor = "pointer"
        }
      },
      restoreBorderColor(element) {//还原边框颜色和光标样式
        if (element) {
          element.style.borderColor = "#e7e7e7"
          element.style.cursor = "pointer"
        }
      },
      deepLight(){
        if (this.ifCanClick) {
          preVri = this.getAddressBlockDivRef;//保存其常亮元素
          this.updateBorderColor(preVri)
        }
      }
    },
    mounted() {
      if (this.content.selectStatus == 1) {//如果选中状态为默认，那么久默认常亮，默认选中
        this.content.ifLL = true;
        this.deepLight();//调用方法使其常亮
      }
      //对元素宽高进行设置
      this.getAddressBlockDivRef.style.width = `${this.height}px`
      this.getAddressBlockDivRef.style.width = `${this.width}px`
    }
  }
</script>

<style scoped>

</style>
